// Charts page layout
.charts-col {
  margin-bottom: 2rem;

  .card {
    padding: 0.5rem;

    .hint {
      position: absolute;
      right: 14px;
    }

    .uplot {
      font-family: 'LiveDashboardFont';
      max-width: 100%;

      &.summary {
        .legend {
          tr:nth-child(n+3) {
            display: table-row;
          }
        }
      }

      .title {
        font-weight: 900;
        margin-bottom: 0.75rem;
      }

      .legend {
        margin-top: 1.75rem;
        font-size: 0.75rem;
        width: 100%;
        table-layout: fixed;

        .labels {
          background-color: $color-gray-100;
          color: $color-gray-800;

          th {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            min-width: 0;
            text-align: center;
            /* this padding is missing from uPlot css */
            padding: 4px;
          }
        }

        .series {
          th {
            text-align: left;
          }

          td {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            min-width: 0;
          }
        }

        &.inline {
          display: flex;
          flex-wrap: wrap;
          text-align: left;
          margin-top: 0;

          .series {
            display: flex;
            flex-basis: 45%;
            order: 10;

            th {
              align-items: center;
              display: flex;
              flex-basis: 55px;
            }

            &:first-child {
              background-color: $color-gray-100;
              color: $color-gray-800;
              flex-basis: 100%;
              margin: 1.75rem 0 0.5rem 0;
              order: 1;
              text-align: center;
              display: inline-block;

              th {
                display: inline-block;
              }

              .ident {
                display: none;
              }
            }

            &:nth-child(2) {
              order: 2;
            }

            &:nth-child(5) {
              order: 4;
            }

            &:nth-child(3) {
              order: 3;
            }
          }
        }
      }
    }
  }
}

/* Override uPlot styles */
/* Avoid wrapping for long legend titles when data is shown for that row on hover, changes the legend heights */
.u-series {
  th {
    text-wrap: nowrap;
  }
}

/* Avoid block styles for legends, leads to chart card size updates and hopping on hover */
.u-inline {
  display: flex;
  flex-direction: column;
}

@media (min-width: map-get($grid-breakpoints, xxl)) {
  [data-phx-view="LiveDashboard.MetricsLive"] #main.container{
    max-width: 95%;

    .charts-nav {
      max-width: map-get($container-max-widths, xl);
    }
  }
}
